<template>
	<view class="integral">
		<view class="header" :class="'bg-' + themeColor.name">
			<view class="title">姓名</view>
			<text class="num">{{ cstmBed.cstmName || customName }}</text>
			<view class="line"></view>
			<view class="nav">
				<view class="item">
					<text class="num">{{ cstmBed.deviceStatus === 1 ? (cstmBed.breath > 0 ? cstmBed.breath : '--') : '--' }}</text>
					<text class="title">呼吸值</text>
				</view>
				<view class="item">
					<text class="num">{{ cstmBed.deviceStatus | filterStatus }}</text>
					<text class="title">设备状态</text>
				</view>
				<view class="item">
					<text class="num">{{ cstmBed.deviceStatus === 1 ? (cstmBed.heart > 0 ? cstmBed.heart : '--') : '--' }}</text>
					<text class="title">心率值</text>
				</view>
			</view>
		</view>

		<uni-grid :column="3" :square="false" :highlight="false" @change="navTo">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box">
					<uni-icons :type="item.name" color="#8f8f94" size="30" />
					<!-- #ifdef APP-PLUS || H5 -->
					<text class="text">{{ item.text }}</text>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					 <u-link :href="item.href" :text="item.text" :inWhiteList="true"></u-link>			
					<!-- #endif -->
					
				</view>
			</uni-grid-item>
		</uni-grid>

		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
/**
 * @des 积分中心
 *
 * @author stav stavyan@qq.com
 * @date 2020-01-10 15:24
 * @copyright 2019
 */
import { getDeviceActual } from '@/api/userInfo';
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
import uLink from '@/components/uni-link/uni-link.vue';
import moment from '@/common/moment';
export default {
	name: 'Integral',
	components: {
		rfLoadMore,
		uLink
	},
	data() {
		return {
			navList: [{ name: '分值明细' }, { name: '分值提升' }],
			current: 0,
			integralList: [],
			loadingType: 'more',
			page: 1,
			userInfo: {},
			loading: true,
			baseUrl: this.$mConfig.baseUrl,
			list: [],
			cstmBed: {},
			customName: null,
			cstmId : null,
		};
	},
	onLoad(option) {
		//console.log('option: ' + JSON.stringify(option));
		this.cstmId = option.id | 0;
		this.customName = option.cstmName;
		this.initData();
	},
	filters: {
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
		},
		numFilter(val) {
			return val >= 0 ? `+${val.toString()}` : val;
		},
		filterStatus(val) {
			let status = '设备离线';
			if (val === 0) status = '离床';
			else if (val === 1) status = '在床';
			return status;
		}
	},
	// 加载更多
	onReachBottom() {
		if (this.loadingType === 'nomore') return;
		this.page++;
		this.getIntegralListList();
	},
	methods: {
		toCategory() {
			this.$mRouter.reLaunch({ route: '/pages/category/category' });
		},
		nav(index) {
			this.loading = true;
			this.current = index;
			this.page = 1;
			this.integralList.length = 0;
			this.getIntegralListList();
		},
		initData() {
			this.userInfo = uni.getStorageSync('userInfo') || undefined;
			for (let i = 0; i < 3; i++) {
				if (i === 0) {
					let item = {};
					item.name = 'navigate';
					item.text = '日报';
					item.href = `${this.baseUrl}/sdSleepStudyController.do?sleepDayDetail&cstmId=${this.cstmId}`;
					this.list.push(item);
				} else if (i === 1) {
					let item = {};
					item.name = 'navigate';
					item.text = '周报';
					item.href = `${this.baseUrl}/sdSleepStudyController.do?sleepWeekDetail&cstmId=${this.cstmId}`;
					this.list.push(item);
				} else if (i === 2) {
					let item = {};
					item.name = 'navigate';
					item.text = '月报';
					item.href = `${this.baseUrl}/sdSleepStudyController.do?sleepMonthDetail&cstmId=${this.cstmId}`;
					this.list.push(item);
				}
			}
			this.getIntegralListList();
			setInterval(() => {
				this.getIntegralListList();
			}, 8000);
		},
		async getIntegralListList() {
			var params = {
				cstmId: this.cstmId
			};
			await this.$http
				.get(`${getDeviceActual}`, params)
				.then(r => {
					this.loading = false;
					this.cstmBed = r.data;
				})
				.catch(() => {
					this.loading = false;
				});
		},
		navTo(e) {
			// #ifdef APP-PLUS ||H5
			let type = '日报';
			if (e.detail.index === 0) {
				type = '日报'
			} else if (e.detail.index === 1) {
				type = '周报'
			} else if (e.detail.index === 2) {
				type = '月报'
			}			
			this.$mRouter.push({
				route: `/pages/zhyl/device/zncd/bed_report?cstmId=${this.cstmId}&type=${type}`
			});
			// #endif

		},
		callTel() {
			if (this.cstmBed.terminalNumber) {
				uni.makePhoneCall({
					phoneNumber: this.cstmBed.terminalNumber
				});
			} else {
				this.$mHelper.toast('设备手机号码未设置!');
			}
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: $color-white;
}
.grid-item-box {
	flex: 1;
	/* position: relative;
 */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.integral {
	background-color: $color-white;
	/*  #ifndef H5  */
	height: 100vh;
	/*  #endif  */
	.header {
		opacity: 0.9;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 320upx;
		font-size: $font-base;
		color: #fff;
		padding: 20upx 0;
		text-align: center;
		position: relative;
		.title {
			font-size: $font-sm;
			margin: 10upx 0;
		}
		.num {
			/*<!--color: $base-color;-->*/
			font-size: $font-lg + 20upx;
			font-weight: lighter;
			line-height: 1;
		}
		.line {
			width: 10%;
			height: 3upx;
			background-color: #fff;
			margin: 20upx auto 30upx;
		}
		.nav {
			width: 100%;
			display: flex;
			.item {
				flex: 1;
				.num {
					font-size: $font-lg + 4upx;
					display: block;
					line-height: 1;
				}
			}
		}
	}
}
.wrapper .list1 {
	background-color: #fff;
	.tip {
		font-size: $font-sm;
		width: 90%;
		margin: $spacing-base 5%;
		height: 64upx;
		line-height: 64upx;
		border-radius: 30upx;
		background-color: #fff5e2;
		border: 1px solid #ffeac1;
		color: #c8a86b;
		text-align: center;
	}
	.list {
		display: flex;
		align-items: center;
		padding: 20upx 36upx;
		background: #fff;
		position: relative;
		.wrapper {
			display: flex;
			flex-direction: column;
			flex: 1;
			.address-box {
				display: flex;
				align-items: center;
				font-size: $font-base;
				color: $font-color-dark;
			}
			.u-box {
				color: $font-color-light;
				font-size: $font-sm;
			}
		}
		.change-num {
			font-size: $font-lg + 4upx;
			color: $font-color-base;
		}
		.change-num-add {
			color: #16ac57;
		}
		.change-num-reduce {
			color: $base-color;
		}
	}
}
.wrapper .list2 {
	/*background-color: #F76260;*/
}
.wrapper .list2 .item {
	background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
	width: 90%;
	margin: $spacing-base 5%;
	height: 120upx;
	line-height: 120upx;
	position: relative;
	border-radius: 20upx;
	padding: 0 20upx;
	display: flex;
}
.wrapper .list2 .item .pictrue {
	width: 60upx;
	height: 100upx;
	margin: 20upx 0;
	image {
		width: 80%;
		height: 80%;
	}
}
.wrapper .list2 .item .name {
	flex: 1;
	font-size: $font-sm;
	font-weight: bold;
	color: #c8a86b;
	margin: 0 20upx;
}
.wrapper .list2 .item .earn {
	font-size: $font-sm;
	color: #c8a86b;
	border: 2upx solid #c8a86b;
	text-align: center;
	height: 48upx;
	margin: 36upx 0;
	width: 120upx;
	border-radius: 10upx;
}
</style>
